<template>
  <div class="merchshopentrance" :style="'padding-top:' + data.p_t / 2 + 'px; padding-bottom:' + data.p_b / 2 + 'px;'">
    <div class="head" :style="'background:' + data.bg_color">
      <img
        mode="widthFix"
        lazy-load=""
        src="@/assets/images/goods_col2.png"
        alt=""
        class="merch-thumb"
        :style="data.logo_type == 'square' ? 'border-radius: 12px' : 'border-radius: 50%;'"
        draggable="false"
      />
      <div class="content" v-bind:class="!data.shownum ? 'flex_center' : ''">
        <p class="title" :style="'color:' + data.title_color + ';margin: 0px;'"><span class="shop-title">仙峰水果店</span></p>
        <p class="subtitle" v-if="data.shownum" :style="'color:' + data.num_color">在售商品1995件</p>
      </div>
      <div class="distance">
        <div class="enter-icon-btn" style="" v-if="data.btn.type == 3">
          <span class="enter-btn-text" :style="'color: '+data.btn.titlecolor1">{{ data.btn.title || '进店看看' }}</span>
          <i class="enter-btn-icon" v-bind:class="data.btn.icon" :style="'color:'+data.btn.icon_color+';background: rgba(0, 0, 0, 0);margin-left:4px'"></i>
        </div>
        <div v-else class="btn" :style="btnstyle">{{ data.btn.title || '进店看看' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    btnstyle() {
      if (this.data.btn.type == 1) {
        let style =
          'color:' + this.data.btn.titlecolor1 + ';background: rgba(0, 0, 0, 0); border: 1px solid ' + this.data.btn.color + ';border-radius: ' + this.data.btn.rd / 2 + 'px;';
        return style;
      } else {
        let style = 'color: ' + this.data.btn.titlecolor2 + '; background:' + this.data.btn.color + '; border: none; border-radius: ' + this.data.btn.rd / 2 + 'px;';
        return style;
      }

    }
  }
};
</script>

<style lang="scss" scoped>
.merchshopentrance {
  width: 100%;
  margin: 0 auto;
  p {
    margin: 0;
  }
  .head {
    display: flex;
    box-sizing: border-box;
    padding: 8px 12px;
    flex-wrap: nowrap;
    background: #fff;
    .merch-thumb {
      width: 48px;
      height: 48px !important;
      border-radius: 6px;
      margin: auto 9px auto 0;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 48px;
      margin: auto 0;
      width: 0;
      flex: 1;
      &.flex_center {
        justify-content: center;
      }
      .title {
        font-size: 14px;
        line-height: 20px;
        font-family: PingFang SC;
        font-style: normal;
        font-weight: 600;
        color: #212121;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        flex-wrap: nowrap;
        .shop-title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .subtitle {
        font-size: 12px;
        line-height: 17px;
        font-family: PingFang SC;
        font-style: normal;
        font-weight: normal;
        color: #969696;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .distance {
      height: 48px;
      flex: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .btn {
        font-family: PingFang SC;
        font-style: normal;
        font-weight: normal;
        color: #ff3c29;
        font-size: 14px;
        padding: 0 11px;
        height: 24px;
        border: 0.5px solid #ff3c29;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 14px;
        margin: auto 0;
        white-space: nowrap;
      }
      .enter-icon-btn {
        font-size: 14px;
        text-align: right;
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        margin-left: 4px;
      }
      .enter-btn-text,
      .enter-btn-icon {
        display: flex;

        flex-direction: column;

        justify-content: center;
        font-size: 14px;
        height: 14px;
        line-height: 14px;
        color: #ff3c29;
        margin: auto 0;
      }
    }
  }
}
</style>
